import {ActionType, PageContainer, ProColumns, ProTable} from '@ant-design/pro-components';
import React, {useEffect, useRef, useState} from 'react';
import {message} from 'antd';
import {listInterfaceInfoByPageUsingGET} from '@/services/api-hub-backend/interfaceInfoController';
import { history } from '@umijs/max';
import type {SortOrder} from 'antd/es/table/interface';
/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);
  const actionRef = useRef<ActionType>();
  // 定义 ProTable 的列配置
  const columns: ProColumns<API.InterfaceInfo>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'indexBorder', // 显示序号列
      width: 60,
      fixed: 'left', // 固定在左侧，方便查看
      hideInSearch: true, // 在搜索表单中隐藏 ID 搜索
    },
    {
      title: '接口名称',
      dataIndex: 'apiName',
      valueType: 'text',
      width: 150,
      ellipsis: true, // 文本过长时显示省略号
      // responsive: ['md', 'lg', 'xl'], // 示例：在小屏时隐藏此列
    },
    {
      title: '描述',
      dataIndex: 'apiDetail',
      valueType: 'textarea',
      width: 200,
      ellipsis: true,
      hideInSearch: true, // 在搜索表单中隐藏描述搜索
      responsive: ['md', 'lg', 'xl'], // 中等及以上屏幕显示
    },
    {
      title: 'URL',
      dataIndex: 'url',
      valueType: 'text',
      width: 250,
      ellipsis: true,
      hideInSearch: true,
      responsive: ['lg', 'xl'], // 大屏幕及以上显示
    },
    {
      title: '请求方法',
      dataIndex: 'method',
      valueType: 'text',
      width: 100,
      hideInSearch: true,
      responsive: ['sm', 'md', 'lg', 'xl'], // 小屏幕及以上显示
      // 可以自定义渲染，例如用 Tag
      // render: (_, record) => <Tag color="blue">{record.method}</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInForm: true,
      width: 80,
      valueEnum: {
        0: {text: '关闭', status: 'Default'},
        1: {text: '开启', status: 'Processing'},
      },
      responsive: ['sm', 'md', 'lg', 'xl'],
      hideInSearch: true, // 可以在搜索表单中显示状态选择
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 80, // 操作列通常不需要太宽，只显示“查看”
      fixed: 'right', // 固定在右侧
      render: (_, record) => (
        <a
          key="view"
          onClick={() => {
            // 跳转到接口详情页
            history.push(`/interface_info/${record.id}`);
          }}
        >
          查看
        </a>
      ),
    },
  ];
  const loadData = async (current = 1, pageSize = 5) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoByPageUsingGET({
        current,
        pageSize,
      });
      setList(res?.result?.records ?? []);
      setTotal(res?.result?.total ?? 0);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer title="在线接口开放平台">
      <ProTable<API.InterfaceInfo, API.listInterfaceInfoByPageUsingGETParams>
        headerTitle="接口列表" // 表格标题
        actionRef={actionRef}
        rowKey="id" // 表格行的唯一key
        // ProTable 的数据请求函数
        request={async (params, sort: Record<string, SortOrder>, filter: Record<string, (string | number)[] | null>) => {
          setLoading(true); // 开启加载状态
          try {
            const res: any = await listInterfaceInfoByPageUsingGET({
              ...params,
              // 处理排序参数
              ...(sort && Object.keys(sort).length > 0
                ? {
                  sortField: Object.keys(sort)[0],
                  sortOrder: sort[Object.keys(sort)[0]],
                }
                : {}),
              // 处理过滤参数
              ...filter,
            });
            if (res?.result) {
              setLoading(false); // 关闭加载状态
              return {
                data: res?.result.records || [],
                success: true,
                total: res?.result.total || 0,
              };
            } else {
              setLoading(false); // 关闭加载状态
              message.error('请求失败');
              return {
                data: [],
                success: false,
                total: 0,
              };
            }
          } catch (error: any) {
            setLoading(false); // 关闭加载状态
            message.error('请求失败，' + error.message);
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
        columns={columns} // 传入定义的列配置
        loading={loading} // 使用 useState 管理 loading 状态
        // 自适应配置
        scroll={{x: 'max-content'}} // 当内容超出时出现横向滚动条，表格宽度由内容撑开
        // 搜索表单配置 (ProTable 默认带有响应式搜索)
        search={{
          labelWidth: 'auto',
          collapsed: true, // 默认折叠搜索表单
          // 搜索表单的响应式布局，会根据屏幕宽度自动折叠/展开
          // xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5
        }}
        // 工具栏，这里我们不需要添加按钮，只需要显示标题
        toolBarRender={false} // 不显示工具栏按钮
      />
    </PageContainer>
  );
};

export default Index;
